{% extends 'web/layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/css/accoun.css' %}">
    <style>
        .error-msg{
            color:red;
            position: absolute;
            font-size: 12px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="account">
        <div class="title">用户注册</div>
        <form id="form" method="post" novalidate>
          {% csrf_token %}
          {% for field in form %}
              {% if field.name == 'code' %}
                  <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <!--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">-->
                    <div class="row">
                        <div class="col-md-7" style="padding-left: 10">
                            {{ field }}
                            <span class="error-msg">{{ field.errors.0 }}</span>
                        </div>
                        <div class="col-md-5">
                            <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                        </div>
                    </div>
                  </div>
              {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <!--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">-->
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
              {% endif %}
          {% endfor %}
          <div class="row">
              <div class="col-xs-3">
                <button id="btnSubmit" type="submit" class="btn btn-primary" href="">提交</button>
              </div>
          </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        // 整个页面加载完成后会自动执行这个函数
        $(function (){
            bindClickBtnSms();
            //bindClickBtnSubmit();
        });
        // 点击获取验证码的按钮绑定的事件。当单击这个按钮时要把输入的手机号码传递给后台函数，好用来发送验证码
        function bindClickBtnSms(){
            $('#btnSms').click(function (){
                // 让用户在点击标签时，原来的错误信息全部清除掉。
                $('.error-msg').empty();
                // 获取用户的手机号码,根据生成输入框的id来获取对应输入框的数据，把数据放在变量mobile_phone中
                var mobile_phone = $('#id_mobile_phone').val();
                // 发送ajax请求，把变量中的手机号码传送给后端的函数。为了保证点击一次60秒倒计时内再次点击，不会再重新发送，需要判断按钮的val()
                if($("#btnSms").val() === "点击获取验证码") {
                    $.ajax({
                        url: "/web/send/sms/",  //地址，要给那个地址传送数据。这个url可以反向生成：url:"｛% url:'send_sms' %｝"
                        type: "GET",  // 传送地址的模式
                        data: {mobile_phone: mobile_phone, tpl: "register"},  // 要传送的数据，data是字典格式的数据
                        dataType: "JSON", // 将服务端返回的数据反序列化为字典，即把res反序列化为字典
                        // 上面ajax的请求发送成功后会执行这个函数，res是后端函数返回的数据
                        success: function (res) {
                            // 当后端的校验成功时，后端返回的res.status=True。并执行函数：sendSmsRemind
                            if (res.status) {
                                sendSmsRemind(); // 在下面定义倒计时的函数：function sendSmsRemind()
                                //alert(res['code']) //通过后端可以利用mobile方法把四位随机数据传送过来
                            } else {
                                //console.log(res)  //后端返回的数据是： {status: false, error: {"mobile_phone":['这个字段是必填项。',]}
                                // 从返回的数据格式可以看出，错误信息是字典中键error的值。取出对应的错误信息并在对应的输入框下面显示
                                $.each(res.error, function (key, value) { // each(要循环的对象，要执行的函数)
                                    $("#id_" + key).next().text(value[0]);
                                })
                            }
                        }
                    })
                }
            })
        }
        // 倒计时函数
         function sendSmsRemind(){
            var $smsBtn = $("#btnSms");
            $smsBtn.prop("disable",true);
            var time = 60;
            var remind = setInterval(function(){
                $smsBtn.val(time + "秒后重新发送")
                time = time - 1;
                if(time<1){
                clearInterval(remind);
                $smsBtn.val("点击获取验证码").prop("disable",false);
            }
            },1000)
        }
        // 点击注册按钮保存数据
        /*function bindClickBtnSubmit(){
            $('#btnSubmit').click(function (){
                // 让用户在点击标签时，原来的错误信息全部清除掉。
                $('.error-msg').empty();
                // 获取用户的手机号码,根据生成输入框的id来获取对应输入框的数据，把数据放在变量mobile_phone中
                var mobile_phone = $('#id_mobile_phone').val();
                // 发送ajax请求，把变量中的手机号码传送给后端的函数
                $.ajax({
                    url:"/web/register/save/",  //地址，要给那个地址传送数据。这个url可以反向生成：url:"｛% url:'send_sms' %｝"
                    type:"POST",  // 传送地址的模式
                    data:{mobile_phone:mobile_phone,tpl:"register"},  // 要传送的数据，data是字典格式的数据
                    dataType:"JSON", // 将服务端返回的数据反序列化为字典，即把res反序列化为字典
                    // 上面ajax的请求发送成功后会执行这个函数，res是后端函数返回的数据
                    success:function (res){
                        // 当后端的校验成功时，后端返回的res.status=True。并执行函数：sendSmsRemind
                        if(res.status){
                            sendSmsRemind(); // 在下面定义倒计时的函数：function sendSmsRemind()
                        }else {
                            //console.log(res)  //后端返回的数据是： {status: false, error: {"mobile_phone":['这个字段是必填项。',]}
                            // 从返回的数据格式可以看出，错误信息是字典中键error的值。取出对应的错误信息并在对应的输入框下面显示
                            $.each(res.error,function (key,value) { // each(要循环的对象，要执行的函数)
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }*/

    </script>
{% endblock %}














